/*
  学习目标：渲染搜索建议
*/

import Icon from '@/components/Icon';
import NavBar from '@/components/NavBar';
import { useAppDispatch, useAppSelector } from '@/store';
import styles from './index.module.scss';
import { getSuggestsAction } from '@/store/action/search';

export default function Search() {
  const dispatch = useAppDispatch();
  // 5. 取出数据, 渲染界面
  const { suggests } = useAppSelector((state) => state.search);
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    dispatch(getSuggestsAction(e.target.value));
  };
  return (
    <div className={styles.root}>
      <NavBar right={<span className="search-text">搜索</span>}>
        <div className="navbar-search">
          <Icon type="iconbtn_search" className="icon-search" />

          <div className="input-wrapper">
            <input
              type="text"
              placeholder="请输入关键字搜索"
              onChange={handleChange}
            />

            <Icon type="iconbtn_tag_close" className="icon-close" />
          </div>
        </div>
      </NavBar>

      <div className="history" style={{ display: 'block' }}>
        <div className="history-header">
          <span>搜索历史</span>
          <span>
            <Icon type="iconbtn_del" />
            清除全部
          </span>
        </div>

        <div className="history-list">
          <span className="history-item">
            Python生成九宫格图片<span className="divider"></span>
          </span>
          <span className="history-item">
            Python<span className="divider"></span>
          </span>
          <span className="history-item">
            CSS<span className="divider"></span>
          </span>
          <span className="history-item">
            数据分析<span className="divider"></span>
          </span>
        </div>
      </div>

      <div className="search-result">
        {suggests.map((item) => {
          return (
            <div key={item} className="result-item">
              <Icon className="icon-search" type="iconbtn_search" />
              <div className="result-value">
                <span>{'高亮'}</span>
                {item}
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
